<template>
  <div class="node-wrap_content">
    <div v-for="item in nodeData" :key="item.key" class="node-wrap-item">
      <div class="node-wrap-item-title">{{ item.title }}</div>
      <node-wrap
        v-if="item.children && item.children.length"
        :nodeData="item.children"
      ></node-wrap>
    </div>
  </div>
</template>

<script>
export default {
  name: "nodeWrap",
  props: {
    nodeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>
<style scoped lang="less">
.node-wrap_content {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid pink;
  box-sizing: border-box;
  position: relative;
}
.node-wrap_content::before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  position: absolute;
  top: -21px;
  left: 50%;
  background-color: pink;
  transform: translateX(-50%);
}
.node-wrap-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
}
.node-wrap_content > .node-wrap-item:nth-of-type(1) {
  &::before {
    content: "";
    display: block;
    width: 50%;
    height: 1px;
    background-color: #e3ebf9;
    position: absolute;
    left: 0;
    top: -1px;
  }
}
.node-wrap_content > .node-wrap-item:last-of-type {
  &::before {
    content: "";
    display: block;
    width: 50%;
    height: 1px;
    background-color: #e3ebf9;
    position: absolute;
    right: 0;
    top: -1px;
  }

}

.node-wrap-item-title {
  width: fit-content;
  width: 100px;
  border: 1px solid red;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    position: absolute;
    background-color: pink;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
